{% extends "base_site.html" %}

{% block content %}
<!--<link rel="stylesheet" type="text/css" href="/media/css/forms.css" /> -->
<link rel="stylesheet" type="text/css" href="/media/css/forms.css" />
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/media/js/core.js"></script>
<script type="text/javascript" src="/media/js/calendar.js"></script>
<script type="text/javascript" src="/media/js/admin/DateTimeShortcuts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.init.js"></script> 
<script type="text/javascript" src="/media/js/actions.min.js"></script>
<script type="text/javascript" src="/media/js/highcharts.js"></script>
<script type="text/javascript" src="/media/js/exporting.js"></script>

<style>
body{font-family: Verdana, helvetica, arial, sans-serif;}
td{text-align:center;font-size:13px;}
</style>
<fieldset class="module aligned ">
	<div>
		<form action="">
			Start:
			<input name="s" value="{{s}}" class="vDateField" type="text" id="id_date" size="11"><span class="datetimeshortcuts"></span>
			&nbsp;&nbsp;&nbsp;
			End:
			<input name="e" value="{{e}}" class="vDateField" type="text" id="id_date" size="11"><span class="datetimeshortcuts"></span>
			&nbsp;&nbsp;&nbsp;
		    <input type="submit" value = "Show Data" /><br/>
		</form>
	</div>
</fieldset>
<hr>
<div id="serverSatus" style="width:100%; height: 350px; float:left"></div>
<br>
<hr>
<div id="serverSatusGraph" style="width:100%; height: 350px; float:left"></div>
<br>
<hr>
<br>
<div id="serverChart" style="width:100%; height: 350px;"></div>
<script type="text/javascript">
$(function () {
        $('#serverSatusGraph').highcharts({
            chart: {
                type: 'area'
            },
            title: {
                text: '{{server.name}}({{server.ip}}) Status'
            },
            subtitle: {
                text: 'Source: {{s}} ~ {{e}}'
            },
            xAxis: {
                categories: {{dateLs|safe}},
                tickInterval:{{intervalArea}},
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            },
            yAxis: {
                title: {
                    text: 'Percent',
                },
                min: {{minValue}},
            },
            tooltip: {
                formatter: function() {
                var s = '<b>'+ this.x +'</b>';
                
                $.each(this.points, function(i, point) {
                    s += '<br/>'+ point.series.name +': '+
                        (point.y * 100 / point.total).toFixed(2) +'%';
                });
                
                return s;
            },
                shared: true
            },
            plotOptions: {
                area: {
                    stacking: 'percent',
                    lineColor: '#ffffff',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#ffffff'
                    }
                }
            },
            series: [{
                name: 'Down',
                color:'red',
                data: {{downLs|safe}}
            }, {
                name: 'Unstable',
                color: 'yellow',
                data: {{unstableLs|safe}}
            }, {
                name: 'Normal',
                color:'green',
                data: {{normalLs|safe}}
            }]
        });
    });
$(function () {
        $('#serverChart').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '{{server.name}}({{server.ip}}) Ping Graph'
            },
            subtitle: {
                text: 'Source: {{s}} ~ {{e}}'
            },
            xAxis: {
                categories: {{pingCreatedOn|safe}},
			tickInterval: {{interval}},
				
            },
            yAxis: {
                title: {
                    text: ' '
                },
                labels: {
                    formatter: function() {
                        return this.value
                    },
                }
				
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 3,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: [{
                name: 'loss',
                marker: {
                    symbol: 'diamond'
                },
                data: {{pingLoss|safe}}
    
            }, {
                name: 'min',
                marker: {
                    symbol: 'diamond'
                },
                data: {{pingMin|safe}}
    
            }, {
                name: 'avg',
                marker: {
                    symbol: 'diamond'
                },
                data: {{pingAvg|safe}}
    
            }, {
                name: 'max',
                marker: {
                    symbol: 'diamond'
                },
                data: {{pingMax|safe}}
            }]
        });
    });
$(function () {
    $('#serverSatus').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '{{server.name}}({{server.ip}})'
        },
        subtitle: {
                text: 'Source: {{s}} ~ {{e}}'
            },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'value',
            data: [
                {   name:'Normal',
		    y:{{allServerSatus.Normal}},
		    color:'green'
		},
                {
                    name: 'Down',
                    y: {{allServerSatus.Down}},
                    sliced: true,
                    selected: true,
                    color: 'red'
                },
                {   name:'Unstable',
		    y:{{allServerSatus.Unstable}},
		    color:'yellow'}
            ]
        }]
    });
});
    

</script>

{% endblock %}
